<!DOCTYPE HTML>
<html>
	<head>
        <meta name="renderer" content="webkit">
		<meta content="云班课,合肥讯百科技"/>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		
		<link rel="icon" th:href="${AppRootContext}+'/assets/favicon.ico'" type="image/x-icon" />
		<link rel="shortcut icon" th:href="${AppRootContext}+'/assets/favicon.ico'" type="image/x-icon">
		<link rel="bookmark" th:href="${AppRootContext}+'/assets/favicon.ico'" type="image/x-icon" />
		<link rel="stylesheet" th:href="${AppRootContext}+'/assets/font-awesome/4.7.0/css/font-awesome.min.css'" >
        <script type="text/javascript" th:src="${AppRootContext}+'/assets/js/polyfill.min.js'"></script>
		<title>[[${AppName}]]用户登录</title>
		<style>
			input:-webkit-autofill {
				background-color: #fff;
				background-image: none;
				color: #000;
				-webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
        			-webkit-text-fill-color: rgba(0,0,0,1)!important;
			}
			*
			{
				font-family:"Microsoft Yahei","微软雅黑","宋体",Tahoma,Arial,Helvetica,STHeiti;
				padding:0px;
				margin:0px;
			}
			html,body
			{
				height:100%;
			}
			body
			{
				position:relative;
				background:#F6F6F6;
				background-image:url('[[${AppRootContext}]]/assets/image/word.jpg');
				background-repeat: repeat-x;
			}
			.container
			{
				height:100%;
				width:100%;
			}
			.innerContainer
			{
				width:90%;
				height:100%;
				margin:auto;
				display:table;
			}
			.loginContainer
			{
				margin:auto;
				width:100%;
				height:200px;
				display:table-cell;
			}
			.loginBox
			{
				min-height:350px;
				box-shadow:none;
				-webkit-box-shadow:none;
				border:none;
			}
			.loginRight
			{
				background:#fff;
				box-sizing:border-box;
			}
			.inputBox
			{
				display:table;
				width:100%;
			}
			.input-group
			{
				margin-top:30px;
				width:100%;
				position:relative;
				border:1px solid #eee;
			}
			.input-group > label
			{
				position:absolute;
				width:40px;
				color:#0080FF;
				display:inline-block;
				text-align:center;
				border-right:1px solid #dfdfdf;
				height:30px;
				top:3px;
			}
			.input-group > label > i
			{
				line-height:30px;
				font-size:120%;
			}
			.input-group input
			{
				width:100%;
				border:none;
				outLine:none;
				background:#fff;
				font-size:90%;
				color:#666;
				height:38px;
				padding-left:48px;
				background:#f3f3f3;
                box-sizing:border-box;
			}
			.loginBtn
			{
				text-align:center;
				margin-top:30px;
			}
			.loginBtn > a
			{
				display:inline-block;
				/* background:url('[[${AppRootContext}]]/assets/image/login/btn2.png');
				background-position:center;
				text-indent:-9999px; */
				background:#3D84FF;
				width:100%;
				height:40px;
				cursor:pointer;
				color:#fff;
				line-height:40px;
				text-indent:0px;
				letter-spacing:10px;
				border-radius:2px;
			}
			.loginBtn > a:hover
			{
				background:#639CFF;
			}
			img
			{
				cursor:pointer;
			}
			.forgetlink
			{
				font-size:13px;
				text-decoration:none;
				color:#1e70bf;
			}
			.logo
			{
				text-align:center;
				font-size:130%;
				color:#444;
				padding:20px 0px;
				border-bottom:1px solid #eee;
			}
			.logo img
			{
			   max-width:80%;
			}
			.bggif
			{
				display:none;
			}
			@media screen and (min-width: 768px)
			{
				.loginBox
				{
					transition:all .5s ease;
					box-shadow:0 0 10px 0 rgba(0,33,79,0.11)
				}
				.loginBox:hover
				{
					transform:translate(-1px,-1px);
					box-shadow:4px 3px 2px 2px #ddd;
				}
				.innerContainer
				{
					width:80%;
				}
			}
			@media screen and (min-width: 992px){ 
				body
				{
				}
				.bggif
				{
					display:block;
				}
				.logo
				{
				}
				.loginContainer
				{
					vertical-align: middle;
				}
				.container
				{
				}
				.innerContainer
				{
					max-width:380px;
				}
				.loginBox
				{
					
					border:1px solid #dfdfdf;
				}
				.loginBox > div
				{
					min-height:450px;
				}
				.loginLeft
				{
					display:block;
				}
			}
			@media screen and (min-width: 1200px) { 
				.loginLeft
				{
					height:100%;
				}
			}
			.copyright
			{
				position:absolute;
				bottom:10px;
				width:100%;
				left:0px;
				text-align:center;
				z-index:1000;
			}
			.copyright > span
			{
				color:#aaa;
				font-size:11px;
				padding:8px;
			}
			.copyright a
			{
				color:#aaa;
				font-size:11px;
				text-decoration:none;
			}
			.errInfo
			{
				float:left;
				color:red;
			}
			.forget-pwd
			{
				margin-top:10px;
				text-align:right;
			}
			.forget-pwd span
			{
				color:#666;
				font-size:80%;
			}
			.tips
			{
				margin-top:10px;
				position:relative;
			}
			.tips > .split
			{
				height:1px;
				background:#eee;
				position:absolute;
				top:10px;
				left:0px;
				right:0px;
				z-index:0;
			}
			.tips > .split-title
			{
				position:relative;
				z-index:99;
				display:block;
				background:#fff;
				margin:auto;
				width:60px;
				text-align:center;
				color:#666;
			}
			.tips > p
			{
				padding:5px;
				font-size:80%;
				color:#aaa;
				white-break:
			}
			.tips-info
			{
			 text-align:center;position:absolute;bottom:60px;left:0px;width:100%;font-size:90%;
			 z-index:1000;
			}
			.tips-info span
			{
			 display:block;
			}
			.tips-info a
			{
			 color:#666;
			 text-decoration:none;
			}
			#showDis
			{
			     display:none;
			     color:red;
			}
		</style>
		<script type="text/javascript" th:src="${AppRootContext}+'/assets/js/vue-2.6.7.js'"></script>
		<script type="text/javascript" th:src="${AppRootContext}+'/assets/js/axios.min.js'"></script>
		<script type="text/javascript" th:src="${AppRootContext}+'/assets/js/xbell.js'"></script>
	</head>
	<body>
		<div class="container">
			<div class="innerContainer" style="z-index:1000;position:relative;">
				<div class="loginContainer">
					<div class="loginBox">
						<div class="loginRight">
							<div class="logo"><img th:src="${AppRootContext}+'/assets/image/logo/xbell_xb.png'" th:alt="${AppName}"/></div>
							<div style="width:90%;margin:auto;">
								<div class="input-group">
									<label><i class="fa fa-user"></i></label>
									<div>
										<input type="text" placeholder="请输入用户名" name="username" id="username" v-model="form.xh"/>
									</div>
								</div>
								<div class="input-group">
									<label><i class="fa fa-lock"></i></label>
									<div>
										<input type="password" placeholder="请输入密码" name="password" id="password" v-model="form.pwd"/>
									</div>
								</div>
								<div class="input-group" v-show="false">
									<div>
										<input type="text" placeholder="验证码" name="code" id="code" v-model="form.code"/>
									</div>
									 <img style="width:100px;height:25px" @click="reloadCode"  :src="imgSrc" id="sercurytyCodeImage" />
								</div>
								<div style="text-align:right">
									<div class="errInfo" v-if="error.length>0" v-html="error"></div>
								</div>
								<div class="loginBtn">
									<a id="gologin" @click.prevent="login" :style="lgStyle">{{lgStyle.background?"登录中...":"登录"}}</a>
								</div>
								
								<div class="forget-pwd">
									    <span>忘记密码</span>
								</div>
								<div class="tips">
									<span class="split"></span>
									<span class="split-title">提示</span>
                                     <p id="showDis" style="color:red;">检测到您的浏览器不符合系统使用条件</p>
									<p>如遇无法登陆情况，可先尝试使用密码找回功能，若依旧无法登陆，请联系相关管理人员<p>
								</div>
							</div>
							
						</div>
					</div>
				</div>
			</div>
		</div>
		
         <div class="tips-info">
             <span style="color:red;font-size:100%;">建议使用火狐浏览器或谷歌浏览器访问本系统，否则系统功能可能无法正常使用</span>
          </div>
		<div class="copyright">
			<span>copyright &copy; 2019 | [[${AppName}]]v[[${AppVersion}]]| <a target="_blank" href="">[[${ClientName}]]</a></span>
		</div>
		<script type="text/javascript">
		        var isOk = isFireFoxOrChrome();
		        if(!isOk)
		        {
		        	  	document.getElementById("showDis").setAttribute("style","display:block;");
		        }
				window._AppRootContext = '[[${AppRootContext}]]';
				document.body.onkeydown = function(e){
					if(e.keyCode==13)
					document.querySelector("#gologin").click();
				};
				var appRoot = new Vue({
					el:'.container',
					data:{
						imgSrc:'',//'[[${AppRootContext}]]login/sercurityCode',
						form:{
							xh:'',
							pwd:'',
							code:'111'
						},
						error:"",
						lgStyle:{}
					},
					methods:{
						reloadCode:function(){
							//this.imgSrc = '[[${AppRootContext}]]login/sercurityCode?id='+Math.random();
						},
						login:function(){
							if(!this.form.xh||this.form.xh.trim()==""||!this.form.pwd||this.form.pwd.trim()=="")
							{
								this.error="请填写完毕后提交"
								return;
							}
							var self = this;
							this.lgStyle={"background":"#ccc","text-indent":"0","letter-spacing":"2px"};
							this.error = "";
							axios({
								url:"[[${AppRootContext}]]/login",
								method:'POST',
								data:this.form
							}).then(function(rep){
								var result = rep.data;
								var obj = window;
								if(result.code==200){
									if(window.top!=null){
								  		obj=window.top; 
									} 
									if(/^http/.test(result.data))
									{
									   obj.location.replace(result.data);
									}
									else
									   obj.location.replace("[[${AppRootContext}]]/");
						   		 }else{
						   			self.error = result.msg;
						   			self.lgStyle={};
						   			self.reloadCode();
						   		 } 
							}).catch(function(err){
								console.log(err);
								self.error = "发生异常";
							});
							return false;
						}
					}
				});
		</script>
	</body>
</html>